<template>
  <div v-dragable class="anchorsBar">
    <el-card class="box-card">
      <div slot="header" class="clearfix box-header">
        <span>摄像头锚点信息</span>
      </div>
      <span class="iconClose">
        <img src="../../assets/images/close.png" @click="clickEvent('showAnchors')">
      </span>
      <div class="text item">
        <el-form label-position="left" label-width="100px" :model="achorsInfo">
          <el-form-item label="名称：">
            <el-input size="small" placeholder="名称不能为空" v-model="achorsInfo.anchorName"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input :rows="4" type="textarea" v-model="achorsInfo.anchorDesc"></el-input>
          </el-form-item>
          <el-form-item label="市：" v-if="mapSource.areaLevel==='01'">
            <el-select v-model="editData.areaCityId" clearable filterable remote reserve-keyword placeholder="请输入关键词"
                       :loading="isLoadingSearch" @change="changeCity" :remote-method="searchCityFn">
              <el-option v-for="item in areaCityNameList" :key="item.cityId" :label="item.cn" :value="item.cityId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区/县：" v-if="mapSource.areaLevel!=='03'">
            <el-select v-model="editData.areaCountyId" clearable filterable remote reserve-keyword placeholder="区/县"
                       :loading="isLoadingSearch" @change="changeCountry" :remote-method="searchCountyFn">
              <el-option v-for="item in areaCountyNameList" :key="'districtId'+item.districtId" :label="item.cn"
                         :value="item.districtId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="街道/乡/镇：">
            <el-select v-model="editData.areaTownId" clearable filterable remote reserve-keyword placeholder="街道/乡/镇"
                       :loading="isLoadingSearch" @change="changeStreet" :remote-method="searchStreetFn">
              <el-option v-for="item in areaTownNameList" :key="'streetId'+item.streetId" :label="item.cn"
                         :value="item.streetId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="道路：">
            <el-select v-model="editData.areaWayId" clearable filterable remote reserve-keyword placeholder="道路"
                       :loading="isLoadingSearch" :remote-method="searchRoadFn">
              <el-option v-for="item in areaWayNameList" :key="'roadId'+item.roadId" :label="item.roadName"
                         :value="item.roadId">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="lab-title">锚点坐标值：</div>
          <el-form-item label="X：">
            <el-input size="small" v-model="achorsInfo.longitude"></el-input>
          </el-form-item>
          <el-form-item label="Y：">
            <el-input size="small" v-model="achorsInfo.latitude"></el-input>
          </el-form-item>
          <el-form-item v-show="mapType === '3d'" label="Z：">
            <el-input size="small" v-model="achorsInfo.height"></el-input>
          </el-form-item>
          <div>当前锚点默认地图比例尺：</div>
          <div class="select">
            <el-select size="small" v-model="achorsInfo.mapScale" placeholder="锚点默认地图比例尺">
              <el-option v-for="(item, index) in mapScaleArr" :label="item.detailName" :value="item.detailCode"
                         :key="index"></el-option>
            </el-select>
          </div>
          <div class="btn-group">
            <el-row>
              <el-button class="left" size="medium" @click="clickEvent('save')" round>保存</el-button>
              <el-button class="right" size="medium" @click="clickEvent('delete')" round>删除</el-button>
            </el-row>
          </div>
        </el-form>
      </div>
    </el-card>
    <div class="btn-group gl" v-if="achorsInfo.anchorStatus !== '01'">
      <el-row>
        <el-button class="left" v-show="currentRelationUrl" size="medium" @click="clickEvent('link')" round>关联
        </el-button>
        <el-button class="right" size="medium" @click="clickEvent('preview')"
                   v-show="!currentRelationUrl || achorsInfo.anchorStatus === '03'" round>预览
        </el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        searchRoadFn (e) {
        },
        searchStreetFn (e) {
        },
        searchCityFn (e) {
        },
        searchCountyFn (e) {
        },
        isLoadingSearch: false,
        editData: {
          areaCityId: '',
          areaCountyId: '',
          areaTownId: '',
          areaWayId: ''
        },
        areaCityNameList: [],
        areaCountyNameList: [],
        areaWayNameList: [],
        areaTownNameList: [],
        mapSource: ''
      }
    },
    props: {
      currentRelationUrl: {
        type: String
      },
      achorsInfo: {
        type: Object
      },
      mapScaleArr: {
        type: Array
      },
      mapType: {
        type: String
      }
    },
    model: {
      prop: 'achorsInfo',
      event: 'achorsInfo'
    },
    methods: {
      achorsInfoInit () {
        this.$request.anchorPointDetailGet(this.achorsInfo.anchorId).then(res => {
          console.log('anchorPointDetailGet', res)
          this.editData.areaCityId = res.areaCityId
          this.editData.areaCountyId = res.areaCountyId
          this.editData.areaTownId = res.areaTownId
          this.editData.areaWayId = res.areaWayId
          if (this.editData.areaCityId) {
            this.areaCityNameList = [{
              cityId: res.areaCityId,
              cn: res.areaCityName
            }]
          } else {
            this.areaCityNameList = []
          }
          if (this.editData.areaCountyId) {
            this.areaCountyNameList = [{
              districtId: res.areaCountyId,
              cn: res.areaCountyName
            }]
          } else {
            this.areaCountyNameList = []
          }
          if (this.editData.areaTownId) {
            this.areaTownNameList = [{
              streetId: res.areaTownId,
              cn: res.areaTownName
            }]
          } else {
            this.areaTownNameList = []
          }
          if (this.editData.areaWayId) {
            this.areaWayNameList = [{
              roadId: res.areaWayId,
              roadName: res.areaWayName
            }]
          } else {
            this.areaWayNameList = []
          }
          switch (this.mapSource.areaLevel) {
            case '03':
              if (!this.editData.areaTownId) {
                this.searchStreetFn('')
              }
              break
            case '02':
              if (!this.editData.areaCountyId) {
                this.searchCountyFn('')
              }
              break
            case '01':
              if (!this.editData.areaCityId) {
                this.searchCityFn('')
              }
              break
            default:
              break
          }
        })
      },
      changeCity (e) {
        this.searchCountyFn('')
        this.editData.areaCountyId = ''
        this.editData.areaTownId = ''
        this.editData.areaWayId = ''
      },
      changeCountry (e) {
        this.searchStreet('')
        this.editData.areaTownId = ''
        this.editData.areaWayId = ''
      },
      changeStreet (e) {
        this.searchRoadFn('')
        this.editData.areaWayId = ''
      },
      /**
       * 搜索道路
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchRoad (e) {
        var params = {cn: e}
        if (!this.editData.areaTownId) {
          return this.$message({
            message: '搜索不到数据，请按顺序填写',
            type: 'warning'
          })
          this.areaWayNameList = []
        }
        params['streetId'] = this.editData.areaTownId
        this.isLoadingSearch = true
        this.$request.metaDataRoadListGet(params)
        .then(res => {
          this.isLoadingSearch = false
          this.areaWayNameList = res
        })
      },
      /**
       * 搜索街道、城镇
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchStreet (e) {
        var districtId = this.mapSource.countyId || this.editData.areaCountyId
        if (!districtId) {
          return this.$message({
            message: '搜索不到数据，请按顺序填写',
            type: 'warning'
          })
          this.areaTownNameList = []
        }
        this.isLoadingSearch = true
        this.$request.metadataStreetListGet({cn: e, districtId})
        .then(res => {
          this.isLoadingSearch = false
          this.areaTownNameList = res
        })
      },
      /**
       * 搜索市
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchCity (e) {
        this.isLoadingSearch = true
        this.$request.metadataCityListGet({cn: e, provinceId: this.mapSource.provinceId})
        .then(res => {
          this.isLoadingSearch = false
          this.areaCityNameList = res
        })
      },
      /**
       * 搜索区县
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchCounty (e) {
        var cityId = this.mapSource.cityId || this.editData.areaCityId
        if (!cityId) {
          return this.$message({
            message: '搜索不到数据，请按顺序填写',
            type: 'warning'
          })
          this.areaCountyNameList = []
        }
        this.isLoadingSearch = true
        this.$request.metadataDistrictListGet({cn: e, cityId})
        .then(res => {
          this.isLoadingSearch = false
          this.areaCountyNameList = res
        })
      },
      throttleInit () {
        this.searchRoadFn = this.$utils.throttle(this.searchRoad, 200)
        this.searchStreetFn = this.$utils.throttle(this.searchStreet, 200)
        this.searchCityFn = this.$utils.throttle(this.searchCity, 200)
        this.searchCountyFn = this.$utils.throttle(this.searchCounty, 200)
      },
      /**
       * 获取图源信息
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       */
      getMapSource () {
        return this.$request.getMapsourceArea().then(res => {
          if (!res.areaLevel) {
            res.areaLevel = '01'
          }
          this.mapSource = res
        })
      },
      clickEvent (type) {
        var flag = false
        switch (this.mapSource.areaLevel) {
          case '01':
            flag = !this.editData.areaCityId
            break
          case '02':
            flag = !this.editData.areaCountyId
            break
          default:
            break
        }
        flag = flag || !this.editData.areaTownId || !this.editData.areaWayId
        if (flag && type === 'save') {
          this.$message({
            type: 'warning',
            message: '请完善锚点地理信息'
          })
          return
        }
        this.$emit('clickEvent', type)
      }
    },
    watch: {
      achorsInfo: {
        handler (cur, old) {
          if (cur.anchorId === old.anchorId) return
          this.$emit('achorsInfo', cur)
          this.achorsInfoInit()
        },
        deep: true
      },
      editData: {
        handler (cur) {
          this.$emit('editData', cur)
        },
        deep: true
      }
    },
    mounted () {
      this.getMapSource().then(res => {
        this.achorsInfoInit()
      })
      this.throttleInit()
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  /*锚点信息*/
  .anchorsBar {
    position: fixed;
    right: 25px;
    z-index: 999;
    top: 185px;
    text-align: left;
    cursor: move;
    width: 355px;

    .text {
      font-size: 14px;
    }

    .iconClose {
      position: absolute;
      top: 10px;
      left: 320px;
      width: 20px;
      cursor: pointer;

      > img {
        width: 100%;
      }
    }

    .box-card {
      width: 355px;
      color: #fff;
      border: 2px solid !important;
      border-image: -webkit-linear-gradient(#3f4249, #00ffff, #3f4249) 30 30 !important;
      border-image: -moz-linear-gradient(#3f4249, #00ffff, #3f4249) 30 30 !important;
      border-image: linear-gradient(#3f4249, #00ffff, #3f4249) 30 30 !important;
      background-color: #3f4249 !important;

      .el-card__header {
        border-bottom: none !important;
        padding: 18px 20px 2px !important;
      }

      .el-form-item__label {
        color: #fff !important;
      }

      .el-input__inner {
        height: 32px;
      }

      .el-select {
        width: 100%;
      }
    }

    .lab-title {
      margin-bottom: 15px;
    }

    .select {
      margin: 10px 0;

      .el-select {
        width: 100%;
      }
    }

    .btn-group {
      padding: 20px 5px 10px 5px;
      text-align: center;

      .left {
        float: left;
        color: #fff;
        padding: 10px 40px;
        margin-right: 80px;
        background: -webkit-linear-gradient(left, #088eec, #17b3e7) !important;
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #088eec, #17b3e7) !important;
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #088eec, #17b3e7) !important;
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #088eec, #17b3e7) !important;
        /* 标准的语法（必须放在最后）*/
        border: none;
      }

      .right {
        float: left;
        color: #fff;
        padding: 10px 40px;
        background: none;
        border: 1px solid #5390a3;
        margin-left: 0;
      }
    }

    .gl {
      margin-top: 25px;
      background-color: #3f4249;
      padding: 35px 25px;
      border: 2px solid;
      border-image: -webkit-linear-gradient(#3f4249, #00ffff, #3f4249) 30 30;
      border-image: -moz-linear-gradient(#3f4249, #00ffff, #3f4249) 30 30;
      border-image: linear-gradient(#3f4249, #00ffff, #3f4249) 30 30;
    }
  }
</style>
